<!--
  #%L
  thinkbig-ui-feed-manager
  %%
  Copyright (C) 2017 ThinkBig Analytics
  %%
  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at
  
      http://www.apache.org/licenses/LICENSE-2.0
  
  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
  #L%
  -->
<card-layout body-css="md-padding">

    <header-section>
        <div layout="row" layout-align="space-between-center" flex>
            <div class="card-title" flex>完成注册</div>
            <h2 class="card-sub-header">5 of 5</h2>
        </div>
    </header-section>

    <body-section>
        <ng-form name="vm.registerTemplateForm">
            <div layout="column">

                <md-input-container class="md-block condensed">
                    <label>描述</label>
                    <textarea ng-model="vm.model.description"></textarea>
                </md-input-container>

                <div layout="column">
                    <md-subheader class="md-subhead left-aligned">流 模板</md-subheader>

                    <div layout="row" layout-align="start start">
                        <md-checkbox ng-model="vm.model.isStream" aria-label="Streaming Template">
                            流式模板
                        </md-checkbox>
                        <span>如果在操作管理中无法跟踪单独的作业和步骤。 将跟踪汇总统计数据和关键故障</span>
                    </div>
                </div>

                <div layout="column" ng-if="!vm.model.isStream">
                    <md-subheader class="md-subhead left-aligned">批量模板</md-subheader>

                    <div layout="column">
                        <md-input-container class="md-block" flex="100">
                            <label>作业创建流量间隔（毫秒）</label>
                            <input name="timeBetweenStartingBatchJobs" ng-model="vm.model.timeBetweenStartingBatchJobs" type="number"  />
                            <div class="hint">
                                如果Operations Manager在该给定的间隔内收到超过1个起始事件，则会抑制下一个作业的创建<br/>
                                将其设置为-1L或0L以始终为每个启动流创建一个作业实例。
                            </div>
                        </md-input-container>

                    </div>
                </div>

                <div layout="column" ng-if="vm.model.reusableTemplate">
                    <md-subheader class="md-subhead left-aligned">可重用模板</md-subheader>
                    <span>该模板将被用作可重用的组件。 它不能用于创建新的Feed，而是可以注册其他Feed模板来引用此模板。
                    </span>
                </div>

                <div layout="column" ng-if="!vm.model.reusableTemplate && vm.model.allowPreconditions">
                    <md-subheader class="md-subhead left-aligned">Feed计划选项</md-subheader>
                    <div layout="row" layout-align="start start">
                        <div><ng-md-icon icon="check" style="fill:green" size="20"></ng-md-icon></div>
                        <span>该模板允许在预先条件下触发管道（即，完成另一个管道）</span>
                    </div>
                </div>

                <div layout="column" ng-if="vm.model.needsReusableTemplate">
                    <md-subheader class="md-subhead left-aligned">连接选项</md-subheader>
                    <div layout="row" ng-repeat="connection in vm.model.reusableTemplateConnections">
                        <div layout="column" flex="50">
                            <span>连接: {{connection.feedOutputPortName}}</span>
                        </div>
                        <div layout="column" flex="50">
                            <md-input-container class="md-block condensed">
                                <md-select name="port-{{connection.feedOutputPortName}}" ng-model="connection.inputPortDisplayName" ng-change="vm.onReusableTemplateConnectionChange(connection)"
                                           required>
                                    <md-option ng-repeat="inputPort in vm.inputPortList" value="{{inputPort.value}}">{{inputPort.label}}</md-option>
                                </md-select>
                                <div ng-messages="vm.registerTemplateForm['port-'+connection.feedOutputPortName].$error " md-auto-hide="false">
                                    <div ng-message="required">这是必填项。</div>
                                    <div ng-message="invalidConnection">所选输入端口不再可用。</div>
                                </div>
                            </md-input-container>
                        </div>
                    </div>
                </div>

                <div layout="column">
                    <md-subheader class="md-subhead left-aligned">显示选项</md-subheader>
                    <div layout="column" class="layout-padding-top-bottom">
                        <span class="md-input-label" style="font-size: 11px;">图标 </span>
                        <div layout="row">
                            <ng-md-icon icon="{{vm.model.icon.title}}" size="45" style="margin:inherit" ng-style="{'fill':vm.model.icon.color}"></ng-md-icon>
                            <md-button class="md-primary" ng-click="vm.showIconPicker()" style="margin-left:35px;">更改图标</md-button>
                        </div>
                    </div>
                </div>

            </div>

            <thinkbig-template-order model="vm.templateOrder" template-id="vm.model.id" template-name="vm.model.templateName" add-as-new="true" add-save-btn="false"></thinkbig-template-order>

            <div layout="row" layout-align="space-between start" layout-fill>
              <div flex="100" layout="column">
                <md-subheader class="md-subhead left-aligned">管道 血缘数据源  </md-subheader>
                <span class="hint">选择应跟踪管道管道的数据源</span>

                    <div ng-if="vm.loadingFlowData" layout="column" layout-align="start center" class="layout-padding-top-bottom">
                    <md-progress-circular md-mode="indeterminate"></md-progress-circular>
                    <span>加载 ...</span>
                </div>

                    <div layout="row" layout-fill layout-align="space-between center" ng-if="!vm.loadingFlowData" class="layout-padding-top-bottom">
                    <div layout="column">

                        <div ng-repeat="dsDef in vm.processorDatasourceDefinitions" layout="column">

                            <div layout="row">
                                <md-checkbox ng-model="dsDef.selectedDatasource"
                                             aria-label="Processor Datasource Definition">{{dsDef.processorName}} - {{dsDef.datasourceDefinition.datasourceType}} -
                                    {{dsDef.datasourceDefinition.connectionType}}
                                </md-checkbox>
                            </div>

                        </div>

                        <div ng-if="vm.processorDatasourceDefinitions.length ==0" class="layout-padding-top-bottom">
                            在匹配配置的数据源定义的流中找不到处理器
                        </div>

                    </div>

                </div>

                </div>

            </div>

            <thinkbig-step-buttons can-continue="vm.registerTemplateForm.$valid &&!vm.loadingFlowData && vm.model.reusableTemplate == false" step-index="{{::vm.stepIndex}}"
                                   final-step="注册"
                                   on-click-final-button="vm.registerTemplate()">
            </thinkbig-step-buttons>

        </ng-form>
    </body-section>
</card-layout>
